<template>
  <div class="home-page h100">
    <div class="cards d-flex ai-center jc-center h100 flex-wrap">
      <div class="card card1">
        <div class="icon-box">
          <i class="iconfont yc-icon">&#xe60b;</i>
        </div>
        <div class="text-l">
          <p>欢迎你！{{user}}</p>
          <p>现在是{{time}}</p>
        </div>
      </div>
      <div class="card card2">
        <div class="icon-box">
          <i class="iconfont yc-icon">&#xe608;</i>
        </div>
        <div>
          <p>目前已录入 {{medicineLength}} 种药材</p>
        </div>
      </div>
      <div class="card card3">
        <div class="icon-box">
          <i class="iconfont yc-icon">&#xe609;</i>
        </div>
        <div>
          <p>目前共有 {{userLength}} 个用户</p>
        </div>
      </div>
      <div class="card card4">
        <div class="icon-box">
          <i class="iconfont yc-icon">&#xe606;</i>
        </div>
        <div>
          <p>目前共有 {{inLength}} 条入库记录</p>
        </div>
      </div>
      <div class="card card5">
        <div class="icon-box">
          <i class="iconfont yc-icon">&#xe601;</i>
        </div>
        <div>
          <p>目前共有 {{outLength}} 条出库记录</p>
        </div>
      </div>
      <div class="card card6"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        time: '',
        medicineLength: 0,
        user: '',
        userLength: 0,
        inLength: 0,
        outLength: 0
      }
    },
    created() {
      this.getMedicineLength()
      this.getUserLength()
      this.getInLength()
      this.getOutLength()
    },
    mounted() {
      this.time = this.getTime(new Date())
      var _this = this
      this.updateTime = setInterval(function() {
        _this.time = _this.getTime(new Date())
      }, 1000)
    },
    beforeDestroy() {
      if (this.updateTime) {
        clearInterval(this.updateTime)
      }
    },
    methods: {
      getTime(date) {
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        var hour = date.getHours()
        var minute = date.getMinutes()
        var second = date.getSeconds()
        var dateStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
        return dateStr
      },
      async getMedicineLength() {
        const {
          data: res
        } = await this.$http.get('/mlength')
        this.medicineLength = res.length
      },
      async getUserLength() {
        const {
          data: res
        } = await this.$http.get('/ulength')
        this.userLength = res.length
        this.user = res.name
      },
      async getInLength() {
        const {
          data: res
        } = await this.$http.get('/ilength')
        this.inLength = res.length
      },
      async getOutLength() {
        const {
          data: res
        } = await this.$http.get('/olength')
        this.outLength = res.length
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card {
    width: 500px;
    height: 300px;
    background-color: seagreen;
    margin: 0px 20px;
    border-radius: 9px;
    display: flex;
    align-items: center;

    .icon-box {
      width: 200px;
      height: 200px;
      .yc-icon {
        height: 200px;
        font-size: 200px;
        line-height: 200px;
      }
    }

    div p {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .card1 {
    background-color: #b2cf87;
  }

  .card2 {
    background-color: #a4cab6;
  }

  .card3 {
    background-color: #83a78d;
  }

  .card4 {
    background-color: rgba(178, 207, 135, 0.75);
  }

  .card5 {
    background-color: rgba(164, 202, 182, 0.75);
  }

  .card6 {
    background-color: rgba(131, 167, 141, 0.75);
  }


</style>
